<template>
	<view class="putQuest">
		<navBar isBack title="提问" color="#333" backColor="#333" background="#fff"></navBar>
		<view class="content">
			<view class="title">
				<view v-if="Array.isArray(estateInfo.thumb_url)">
					<image :src="estateInfo.thumb_url[0].path" mode=""></image>
				</view>
				<view v-else>
					<image :src="estateInfo.thumb_url.path" mode=""></image>
				</view>
				{{estateInfo.name}}
			</view>
			<view class="toPut">
				<textarea value="" v-model="title" placeholder="描述您要问的问题吧~" />
				<p>5个字以上</p>
			</view>
			<view class="youCan">
				<h2>您可以问：</h2>
				<view class="list">
					<view class="item" v-for="(item,index) in questList" :key="index">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="submitBtn">
			<button type="default" @click="toSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import service_oneN from '@/service/oneN.js'
	export default{
		data(){
			return{
				baseImg:'http://manager.ryz1620.com',
				estateInfo:{},//小区详情
				questList:[],//您可以问模板
				estate_id:null,
				title:'',
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.estate_id = options.estate_id
			this.getEstateInfo()
			this.getAskMode()
		},
		methods:{
			// 获取小区详情
			getEstateInfo(){
				service_oneN.getEstateDetail({estate_id:this.estate_id}).then(res=>{
					console.log(res,'小区详情')
					if(res.code==1){
						this.estateInfo = res.data?res.data:{}
					}
					console.log(this.estateInfo)
				})
			},
			
			// 获取提问模板
			getAskMode(){
				service_oneN.getAskMode().then(res=>{
					console.log(res,'提问模板')
					if(res.code==1){
						this.questList = res.data?res.data:[]
					}
				})
			},
			
			// 提交提问
			toSubmit(){
				if(this.title=='' || this.title.length<5){
					uni.showToast({
						title:'请输入不少于五字的问题',
						icon:'none'
					})
					return
				}
				console.log(this.estate_id)
				let params = {
					estate_id:this.estate_id,
					title:this.title
				}
				service_oneN.addQuest(params).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title:'提问成功',
							icon:'success'
						})
						this.title = ''
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.putQuest{
		height: 100%;
		background-color: #fff;
		.content{
			padding: 0 32rpx;
			.title{
				padding: 40rpx 0 32rpx 0;
				display: flex;
				align-items: center;
				image{width: 60rpx;height: 60rpx;margin-right: 24rpx;border-radius: 4rpx;}
				font: 500 32rpx/52rpx PingFang SC;
				color: #333333;
				border-bottom: 2rpx solid #F5F5F5;
			}
			.toPut{
				margin-top: 32rpx;
				width: 100%;
				display: flex;
				flex-direction: column;
				height: 240rpx;
				textarea{
					width: 100%;
					height: 100%;
				}
				p{
					width: 100%;
					text-align: right;
					font: 400 24rpx/36rpx PingFang SC;
					color: #939393;
					padding-bottom: 32rpx;
					border-bottom: 2rpx solid #F5F5F5;
				}
				
			}
			
			// 问
			.youCan{
				margin-top: 32rpx;
				h2{
					font: 500 28rpx/48rpx PingFang SC;
					color: #333333;
					margin: 32rpx 0;
				}
				.list{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.item{
						margin-right: 16rpx;
						font: 400 24rpx/44rpx PingFang SC;
						color: #939393;
						margin-bottom: 16rpx;
						border-radius: 28rpx;
						padding: 5rpx 24rpx;
						border: 2rpx solid #CCCCCC;
					}
				}
			}
		}
		.submitBtn{
			width: 100%;
			height: 108rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			height: calc(108rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(108rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			button{
				margin: 10rpx auto;
				width: 520rpx;
				height: 88rpx;
				background-color: #C3AB7C;
				border-radius: 44rpx;
				color: #fff;
				font: 600 32rpx/88rpx PingFang SC;
			}
		}
	}
</style>
